<template>
  <div style="height:100%;" class="RootLoading">
    <div class="content">
      <div class="lable-item">
        <span>账号</span>
        <el-input v-model="username" placeholder="请输入要绑定的账号(账号为身份证号码)" clearable></el-input>
      </div>
      <div class="lable-item">
        <span>密码</span>
        <el-input clearable v-model="password" type='password' placeholder="请输入密码(密码为身份证后四位)" show-password></el-input>
      </div>
      <van-button type="info" native-type="submit" style="width:100%;border-radius: 4px;margin-top:5px;height:6.6vh;font-size:1.2rem;" @click="onSubmit">绑定并登录</van-button>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant';
import {mapGetters} from 'vuex'
export default {
  computed:{
    ...mapGetters(['initObj'])
  },
  data() {
    return {
      loading:false,
      username: '',
      password: '',
    }
  },
    methods: {
        onSubmit() {
          let values = {
            username:this.username,
            password:this.password
          }
          if(this.username==''||!this.username){
            Notify({ type: 'warning', message: '请输入用户名' });
          }
          this.$emit('mobile',values)
        },
         // 登录
      handleLogin() {
        this.loading = true
        this.$store.dispatch('user/login', {username:this.username,password:this.password}).then(() => {
          this.$router.push({
            path: '/home'
          }).then(()=>{
            this.loading = false
          }).catch((err) => {
            this.loading = false
          })
        }).catch(() => {
          this.loading = false
        })
         
      },
    },
    // created() {
    //   document.title='账号绑定'
    // },
    destroyed() {
      document.title=this.initObj.alias
    },
}
</script>

<style lang="scss" scoped>
.RootLoading{
    height:100%;
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: center;
    flex-direction: column;
    // justify-content: space-between;
    font-size: 1.2rem;
    background: url('~@/assets/mobile/banner.jpg') no-repeat;
    background-size:100%;
    .content{
      padding:6vh 4vw;
      background: #fff;
      margin-top:22.5vh;
      border-top-right-radius: 1.75rem;
      border-top-left-radius: 1.75rem;
      width: 100%;
      height: 100%;
      .lable-item{
        font-size: 1rem;
        display: flex;
        flex-direction: column;
        margin-bottom:2vh;
        span{
          color:#999;
          margin-bottom:1vh;
        }
      }
    }
}
::v-deep{
  .el-input__inner{
    height:7.2vh !important;
    line-height:7.2vh !important;
    width: 100% !important;
    border:none !important;
    background: #F2F2F5;
  }
  input::-webkit-input-placeholder{
    font-size: 1rem;
    // color: #f00;
  }
}
</style>